<template>
  <div>
    <Card>
      <tables ref="tables" editable searchable search-place="top" v-model="tableData" :columns="columns"
        @on-delete="handleDelete" />
      <Button style="margin: 10px 0;" type="primary" @click="exportExcel">导出为excel文件</Button>
      <Button style="position:absolute; top: 27px; right: 17px;" type="primary" @click="addConfig">补货建议</Button>
    </Card>
    <Modal v-model="visible" :title="title" :mask-closable="false" width="80%">
      <tables ref="adviceTables" v-model="adviceTableData" :columns="adviceColumns" />
      <Button style="margin: 10px 0;" type="primary" @click="exportAdviceExcel">导出为excel文件</Button>
    </Modal>
  </div>
</template>

<script>
import Mock from 'mockjs'
import Tables from '_c/tables'
import {
  machineGroupNameValues,
  machineNumberValues,
  commoditys,
  commodityTypes,
  commodityImgs,
} from '@/mock/data/option-data.js'
import rcRequest from 'rc-request'
import jsCookie from 'js-cookie'

export default {
  name: 'discount_code_statis_page',
  components: {
    Tables
  },
  data() {
    return {
      columns: [
        { title: '机器组名', key: 'machineGroupName' },
        { title: '机器编号', key: 'machineNum' },
        { title: '机器名', key: 'machineName' },
        // { title: '管理员', key: 'administrator' },
        { title: '缺货商品数量', key: 'stockNumber', className: 'stock-amount' },
        { title: '缺货货道数量', key: 'freightWayNumber', className: 'freight-way' },
        {
          title: '操作',
          key: 'action',
          width: 175,
          render: (h, params) => {
            return h('div', [
              // h('Button', {
              //   props: {
              //     type: 'warning',
              //     size: 'small',
              //     ghost: true,
              //   },
              //   on: {
              //     click: () => this.tableData.splice(params.index, 1)
              //   },
              // }, '删除'),
              // h('span', {}, ' '),
              h('Button', {
                props: {
                  type: 'info',
                  size: 'small',
                  ghost: true,
                },
                on: {
                  click: async () => {
                    this.visible = true;
                    this.title = `${params.row.machineName}的补货建议`;
                    this.adviceTableData = [];
                    // 机器缺货查询
                    const { data: { data } } = await rcRequest({
                      method: 'post',
                      url: '/aisle/select_one_machine_stockout_info',
                      data: {
                        machine_id: params.row.machine_id,
                      },
                    })
                    this.adviceTableData = data.filter(item => item.capacity >= item.existing).map(item => ({
                      id: item.id,
                      commodityImg: item.img,
                      commodityName: item.product_name,
                      commodityType: item.product_type,
                      commodityCode: item.product_coding,
                      extant: item.existing,
                      capacity: item.capacity,
                      replenishedCount: Math.abs(item.existing - item.capacity),
                    }))
                  },
                },
              }, '补货建议'),
            ]);
          }
        }
      ],
      tableData: [],
      // 补货建议
      visible: false,
      title: '补货建议',
      adviceColumns: [
        {
          title: '商品图片',
          key: 'commodityImg',
          width: 120,
          render: (h, { row }) => {
            return (
              <img
                src={row.commodityImg}
                alt='cover'
                fit='cover'
                style={`
                  width: 80px;
                  height: 80px;
                  margin-top: 10px;
                  margin-bottom: 10px;
                `}
              />
            )
          }
        },
        { title: 'SKU/商品名称', key: 'commodityName' },
        { title: '类型', key: 'commodityType' },
        { title: '商品条码', key: 'commodityCode' },
        { title: '现存', key: 'extant' },
        { title: '容量', key: 'capacity' },
        { title: '待补货数量', key: 'replenishedCount' },
      ],
      adviceTableData: [],
    }
  },
  methods: {
    handleDelete(params) {
      console.log(params)
    },
    exportExcel() {
      this.$refs.tables.exportCsv({
        filename: `补货建议-${(new Date()).valueOf()}.csv`
      })
    },
    exportAdviceExcel() {
      this.$refs.adviceTables.exportCsv({
        filename: `补货建议-${(new Date()).valueOf()}.csv`
      })
    },
    addConfig() {
      this.visible = true;
      this.title = '补货建议';
      this.adviceTableData = [];
      this.getAdviceData();
    },
    // 获取列表数据
    async getListData() {
      const { data: { data } } = await rcRequest({
        method: 'post',
        data: { },
        url: '/machine/select_machine_replenishment_suggestion_info'
      })
      this.tableData = data.map(item => ({
        id: item.id,
        machineGroupName: item.machine_group_name,
        machineNum: item.number,
        machineName: item.name,
        stockNumber: Math.abs(item.machine_existing - item.machine_capacity),
        freightWayNumber: item.aisle_status == 0 ? '正常' : item.aisle_status,
        machine_id: item.machine_id,
      }))
    },
    // 获取补货建议数据
    async getAdviceData() {
      const { data: { data } } = await rcRequest({
        method: 'post',
        url: '/productinfo/select_stockout_productinfo_info',
        data: { }
      })
      this.adviceTableData = data.map(item => ({
        id: item.id,
        commodityImg: item.img,
        commodityName: item.product_name,
        commodityType: item.product_type,
        commodityCode: item.product_coding,
        extant: item.existing,
        capacity: item.capacity,
        replenishedCount: Math.abs(item.existing - item.capacity),
      }))
    },
  },
  mounted() {
    this.getListData()
    this.getAdviceData()
  }
}
</script>

<style scoped>
.stock-amount {
  color: red;
  font-weight: bold;
}

.freight-way {
  color: red;
  font-weight: bold;
}

.commodity-img {
  width: 80px;
  height: 80px;
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
